<template>
    <div id="step-file" class="jx-content expeiment-chaper">
         <div class="ediator">
<!-- 王天宇 星级评分 html-->
            <div class="s-star-box">
                <span style="font-size:16px;">设置实验难度：</span>
                <el-rate @change="reqStar" v-model="starValue"></el-rate>
            </div>
<!-- 王天宇 星级评分 html end-->
           <div class="ediator-title">
                <p class="fl title">实验目标</p>
                <div class="fr">
                    <i class="iconfont icon-baocun2" @click="submitTarget"></i>
                </div>
           </div>
           <!-- 未保存内容 -->
            <div>
                 <mavonEditor  ref="Content" class="ediator-ev"></mavonEditor>
            </div>
            <!-- 已保存内容 -->
             <!-- <div class="markdown-body editormd-preview-container" v-html="TargetMarkHtml" v-if="TargetMarkHtml"></div> -->
        </div>
        <!-- 是否有实验步骤 -->
        <div class='AddSerp' v-if="steepList.length <= 0">
             <button class="button-style btns" @click="AddSerp" ><i class="iconfont icon-liebiao"></i>添加实验步骤</button>
        </div>
        <!-- 实验步骤 -->
        <el-carousel v-if="steepList.length > 0" height="120px" @change="carouselChange" :autoplay="false" :loop="false" indicator-position="outside">
            <el-carousel-item v-for="item in carouselLength" :key="item">
                <div class="steps" v-if="steepList.length > 0">
                    <ul >
                        <li v-for="(item, index) in carouselSteepList" :key="index" :class="{ active : tabActive == carouselIndex*10 + index }" @click="steep(carouselIndex*10 + index,item.stepChapterId)" >步骤{{ carouselIndex*10 + index +1 }}</li>
                    </ul>
                </div>
            </el-carousel-item>
        </el-carousel>
        <!-- 实验步骤 -->
        <!-- <div class="steps" v-if="steepList.length > 0">
            <ul >
                <li v-for="(item, index) in steepList" :key="index" :class="{ active : tabActive == index }" @click="steep(index,item.stepChapterId)" >步骤{{index +1 }}</li>
            </ul>
        </div> -->
        <!-- 实验步骤切换 -->
        <div v-for="(item, index) in steepList" :key="index" v-show="tabActive == index">

           <div>
                <div class="expeiment-steep">
                    <p>步骤名称&nbsp;&nbsp; &nbsp;<span class="expeiment-steep-inroduce" :title="item.name">{{ item.name }}</span><i class="iconfont icon-bianji" @click="editSteep(item.name,item.id)"></i></p>
                    <div>
                        <el-button size="medium" @click="Add">添加</el-button>
                        <el-button size="medium" @click="DeleteSteep(item.id)">删除</el-button>
                    </div>
                </div>

                <p class="video">实验视频</p>
                <!-- 没有视频 -->
                <div class="video-empty" v-if="!versionVideo"  >
                    <div class="uploadBtns">
                        <p><img src="../../../assets/images/upImg.png"/></p>
                        <p class="uploadBtns-file">点击上传视频</p>
                        <input id="version-files" type="file" @change="putFile($event,item.stepChapterId)">
                        <p class="uploadBtns-file">提示：支持Mp4视频上传</p>
                    </div>
                </div>
                <!-- 有视频 -->
                <div class="video-img" v-if="versionVideo && tabActive == index" >
                    <div class="iconpost" >
                        <p class="filename">{{ fileName }}</p>
                        <div class="iconfontlist">
                            <i class=" iconfont icon-bofang1" title="播放视频" @click="playvideo(item.stepChapterId,index)"></i>
                            <i class=" iconfont icon-Group-" @click="deleteVideo(item.stepChapterId)" title="删除视频"></i>
                            <i class=" iconfont icon-shangchuan"><input id="versionFile" type="file" title="上传视频" @change="putFile($event,item.stepChapterId)"></i>
                            <i class=" iconfont icon-xiazai" v-if=" versionVideo !='' && flagDown" title="下载视频" @click="downFiles(item.stepChapterId)" ></i>
                            <i class=" iconfont icon-xiazai xiaz2" v-if="versionVideo =='' ||  !flagDown"  ></i>
                        </div>
                    </div>
                </div>
                <div class=" video-img-load">
                    上传中<i class="el-icon-loading"></i>
                </div>
                <!-- 视频展示 -->
                <div class="tabFunction">
                     <ul>
                          <li @click="tabFunction(0,item)" :class="{ tabFunctionIndex : tabIndex == 0 }">实验手册</li>
                          <li @click="tabFunction(1,item)" :class="{ tabFunctionIndex : tabIndex == 1 }">实验判定</li>
                     </ul>
                </div>
                <div v-if="tabIndex == 0">
                    <div class="upload-btn">
                        <div style="width:100px">
                            <span class="word-upload">
                                <i class="iconfont icon-tubiaozhizuomoban2"></i>
                                <input id="upload-file-input" type="file" @change="getFile($event,index,item.stepChapterId)" title="Word上传">
                            </span>
                            <span>
                                <i class="iconfont icon-baocun2" @click="submitFn(item.stepChapterId)"></i>
                            </span>
                        </div>
                    </div>
                    <div v-show="tabActive == index">
                        <!-- <mavonEditor :ref="'item'+index"  class="ediator-ev aa"  ></mavonEditor> -->
                        <mavonEditor :ref="'item'+item.stepChapterId"  class="ediator-ev aa"  ></mavonEditor>
                    </div>
                </div>
                <div v-if="tabIndex == 1" class="">
                    <div class="iconBtn">

                            <span class="iconBtn-class">允许学生跳过&nbsp;</span>
                            <el-radio-group v-model="exradio">
                                <el-radio label="1">是</el-radio>
                                <el-radio label="2">否</el-radio>
                            </el-radio-group>

                        <i class="iconfont icon-baocun2" @click="judgeSave(item.stepChapterId)"></i>
                    </div>
                    <el-input
                        type="textarea"
                        placeholder="请输入判定脚本"
                        v-model="judge"
                        maxlength="1000"
                        show-word-limit
                        >
                    </el-input>
                    <div class="spance"></div>
                    <el-input
                        type="textarea"
                        placeholder="请输入判定结果，判定脚本的输出结果与判定结果一致，即认为判定通过。如果脚本无输出结果，此处可不填。"
                        v-model="judgerever"
                        maxlength="500"
                        show-word-limit
                        >
                    </el-input>
                </div>
            </div>
        </div>
        <el-dialog :close-on-click-modal="false" title="视频"  :visible.sync="dialogPreviews" width="40%"  class="preview"  @close='closeVideoDialog' style="z-index:999">
            <!-- <video id="video"   controls disablePictureInPicture  controlslist="nodownload" class="videoShow" :src="videoUrl" ></video> -->
            <video id="video" class="video-js vjs-default-skin vjs-big-play-centered" preload="auto" data-setup='{}'>
                <source  :src="videoUrl">
            </video>
        </el-dialog>
         <!-- 实验步骤弹窗 -->
        <el-dialog :close-on-click-modal="false" class="dialog-tips" :title="title" :visible.sync="dialogHistorySteep" width="490px"  >
            <el-form   label-width="100px"  @submit.native.prevent>
                 <el-form-item label="步骤序号：" v-if="Isflag == 1 ">
                    <span>步骤 {{steepList.length +1 }}</span>
                </el-form-item>
                <el-form-item label="步骤名称：" prop="name" >
                    <el-input v-model="Steepname" maxlength="250"  placeholder="请输入步骤名称" ></el-input>
                </el-form-item>
            </el-form>
            <div class="footer" style="text-align:center;margin-top:15px">
                <button class="button-style saveBtn" @click="saveList">保 存</button>
            </div>
        </el-dialog>
        <div class="virtual-position" @click="VirtualLink">
            <img src="./../../../assets/images/virtual_link.png" />
        </div>
        <el-dialog :close-on-click-modal="false" class="dialog-distribution" title="分配镜像" :visible.sync="dialogDistributionFormVisible"  label-width="100px" width="830px">
            <el-form :model="distributionform" ref="distributionform">
                <el-form-item class="is-required" label="实验类型：">
                    <el-radio-group v-model="distributionform.experimentType" @change="experimentTypeChange">
                        <el-radio :label="1">可视化实验</el-radio>
                        <el-radio :label="2">NoteBook实验</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item class="is-required" label="配置类型：" v-if="distributionform.experimentType == 1">
                    <el-radio-group v-model="distributionform.resource">
                        <el-radio :label="1">单节点</el-radio>
                        <el-radio :label="2">集群</el-radio>
                    </el-radio-group>
                </el-form-item>
                <template v-if="distributionform.experimentType == 2">
                    <el-form-item class="config-item">
                        <div class="fl item-config">
                            <el-form-item
                                prop="distributedData.cpuValue"
                                :rules="{
                                    required: true, message: '请选择CPU上限', trigger: 'blur'
                                }"
                                label="配置："
                                style=" float:left; width:210px;"
                                class="item-cpu">
                                <el-select v-model="distributionform.distributedData.cpuValue" value-key="value" placeholder="CPU上限">
                                    <el-option
                                    v-for="item in distributionform.distributedData.cpuOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item
                                prop="distributedData.ramValue"
                                :rules="{
                                    required: true, message: '请选择内存上限', trigger: 'blur'
                                }"
                                style="width:110px; float:left; margin-left:10px;">
                                <el-select v-model="distributionform.distributedData.ramValue" placeholder="内存上限">
                                    <el-option
                                    v-for="item in distributionform.distributedData.ramOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-form-item>
                    <el-form-item class="is-required" label="镜像：">
                        <el-cascader
                            :options="distributionform.options0"
                            v-model="distributionform.optionsValue0"
                            :show-all-levels="false"
                            @change="handleItemChange"
                        ></el-cascader>
                    </el-form-item>
                </template>
                <template v-if="distributionform.experimentType == 1">
                    <div class="form-title">{{ distributionform.resource == 1 ? '伪分布' : '主节点'}}</div>
                    <!-- 伪分布 -->
                    <el-form-item class="config-item" v-if="distributionform.resource == 1">
                        <div class="fl item-config">
                            <el-form-item
                                prop="distributedData.cpuValue"
                                :rules="{
                                    required: true, message: '请选择CPU上限', trigger: 'blur'
                                }"
                                label="配置："
                                style=" float:left; width:210px;"
                                class="item-cpu">

                                <el-select v-model="distributionform.distributedData.cpuValue" value-key="value" placeholder="CPU上限">
                                    <el-option
                                    v-for="item in distributionform.distributedData.cpuOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item
                                prop="distributedData.ramValue"
                                :rules="{
                                    required: true, message: '请选择内存上限', trigger: 'blur'
                                }"
                                style="width:110px; float:left; margin-left:10px;">
                                <el-select v-model="distributionform.distributedData.ramValue" placeholder="内存上限">
                                    <el-option
                                    v-for="item in distributionform.distributedData.ramOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <!-- <el-form-item class="fl item-Gpu" label="GPU">
                            <el-switch
                                v-model="distributionform.distributedData.switchValue">
                            </el-switch>
                        </el-form-item> -->
                    </el-form-item>
                    <el-form-item class="is-required" label="镜像："v-if="distributionform.resource == 1">
                        <el-cascader
                            :options="distributionform.options0"
                            v-model="distributionform.optionsValue0"
                            :show-all-levels="false"
                            @change="handleItemChange"
                        ></el-cascader>
                    </el-form-item>
                    <!-- 伪分布end -->
                    <!-- 主节点 -->
                    <el-form-item class="config-item" v-if="distributionform.resource == 2">
                        <div class="fl item-config">
                            <el-form-item
                                prop="nodeMianData.cpuValue"
                                :rules="{
                                    required: true, message: '请选择CPU上限', trigger: 'blur'
                                }"
                                label="配置："
                                style=" float:left; width:210px;"
                                class="item-cpu">
                                <el-select v-model="distributionform.nodeMianData.cpuValue" value-key="value" placeholder="CPU上限">
                                    <el-option
                                    v-for="item in distributionform.nodeMianData.cpuOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item
                                prop="nodeMianData.ramValue"
                                :rules="{
                                    required: true, message: '请选择内存上限', trigger: 'blur'
                                }"
                                style="width:110px; float:left; margin-left:10px;">
                                <el-select v-model="distributionform.nodeMianData.ramValue" placeholder="内存上限">
                                    <el-option
                                    v-for="item in distributionform.nodeMianData.ramOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <!-- <el-form-item class="fl item-Gpu" label="GPU">
                            <el-switch
                                v-model="distributionform.nodeMianData.switchValue">
                            </el-switch>
                        </el-form-item> -->
                    </el-form-item>
                    <el-form-item class="is-required" label="镜像：" v-if="distributionform.resource == 2">
                        <el-cascader
                            :options="distributionform.options7"
                            v-model="distributionform.optionsValue7"
                            :show-all-levels="false"
                            @change="handleItemChange"
                        ></el-cascader>
                    </el-form-item>
                    <!-- 伪分布end -->
                    <div class="form-title" v-if="distributionform.resource == 2">从节点</div>
                    <!-- 镜像配置 -->
                    <el-form-item class="config-item" v-if="distributionform.resource == 2">
                        <div class="fl item-config">
                            <el-form-item
                                prop="mirrorConfigData.cpuValue"
                                :rules="{
                                    required: true, message: '请选择CPU上限', trigger: 'blur'
                                }"
                                label="配置："
                                style=" float:left; width:210px;"
                                class="item-cpu">
                                <el-select v-model="distributionform.mirrorConfigData.cpuValue" value-key="value" placeholder="CPU上限">
                                    <el-option
                                    v-for="item in distributionform.mirrorConfigData.cpuOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item
                                prop="mirrorConfigData.ramValue"
                                :rules="{
                                    required: true, message: '请选择内存上限', trigger: 'blur'
                                }"
                                style="width:110px; float:left; margin-left:10px;">
                                <el-select v-model="distributionform.mirrorConfigData.ramValue" placeholder="内存上限">
                                    <el-option
                                    v-for="item in distributionform.mirrorConfigData.ramOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <!-- <el-form-item class="fl item-Gpu" label="GPU">
                            <el-switch
                                v-model="distributionform.mirrorConfigData.switchValue">
                            </el-switch>
                        </el-form-item> -->
                    </el-form-item>
                    <!-- 镜像配置 -->
                    <el-form-item v-if="distributionform.resource == 2" label="从节点数：">
                        <div class="virtual-step">
                            <ul>
                                <!-- <li v-for="(item, index) in distributionform.virtualStepList" @click="AddClass(((index+1)*2))" :class="{ active:((index+1)*2) == distributionform.virtualStepCurrent, 'active-disabled': index != 0}">{{item.value}}</li> -->
                                <li v-for="(item, index) in distributionform.virtualStepList" @click="AddClass(((index+1)))" :class="{ active:((index+1)) == distributionform.virtualStepCurrent}">{{item.value}}</li>
                            </ul>
                        </div>
                    </el-form-item>
                    <div class="item-node" v-if="distributionform.resource == 2">
                        <el-form-item class="is-required" label="镜像1：" v-if="distributionform.virtualStepCurrent == 1 || distributionform.virtualStepCurrent == 2 ||distributionform.virtualStepCurrent == 4 || distributionform.virtualStepCurrent == 6">
                            <el-cascader
                                :options="distributionform.options1"
                                v-model="distributionform.optionsValue1"
                                :show-all-levels="false"
                                @change="handleItemChange"
                            ></el-cascader>
                        </el-form-item>
                        <el-form-item class="is-required" label="镜像2：" v-if="distributionform.virtualStepCurrent == 2 || distributionform.virtualStepCurrent == 4 || distributionform.virtualStepCurrent == 6">
                            <el-cascader
                                :options="distributionform.options2"
                                v-model="distributionform.optionsValue2"
                                :show-all-levels="false"
                                @change="handleItemChange"
                            ></el-cascader>
                        </el-form-item>
                        <el-form-item class="is-required" label="镜像3：" v-if="distributionform.virtualStepCurrent == 4 || distributionform.virtualStepCurrent == 6">
                            <el-cascader
                                :options="distributionform.options3"
                                v-model="distributionform.optionsValue3"
                                :show-all-levels="false"
                                @change="handleItemChange"
                            ></el-cascader>
                        </el-form-item>
                        <el-form-item class="is-required" label="镜像4：" v-if="distributionform.virtualStepCurrent == 4 || distributionform.virtualStepCurrent == 6">
                            <el-cascader
                                :options="distributionform.options4"
                                v-model="distributionform.optionsValue4"
                                :show-all-levels="false"
                                @change="handleItemChange"
                            ></el-cascader>
                        </el-form-item>
                        <el-form-item class="is-required" label="镜像5：" v-if="distributionform.virtualStepCurrent == 6">
                            <el-cascader
                                :options="distributionform.options5"
                                v-model="distributionform.optionsValue5"
                                :show-all-levels="false"
                                @change="handleItemChange"
                            ></el-cascader>
                        </el-form-item>
                        <el-form-item class="is-required" label="镜像6：" v-if="distributionform.virtualStepCurrent == 6">
                            <el-cascader
                                :options="distributionform.options6"
                                v-model="distributionform.optionsValue6"
                                :show-all-levels="false"
                                @change="handleItemChange"
                            ></el-cascader>
                        </el-form-item>
                    </div>
                </template>
            </el-form>
            <div class="distribution-item" v-if="distributionform.distributionData">
                <div class="jx-course-box">
                    <img :src="distributionform.distributionData.iconUrl" />
                    <span v-text="distributionform.distributionData.imageName"></span>
                </div>
                <div class="jx-course-text" v-text="distributionform.distributionData.description"></div>
                <div class="jx-course-icon" v-if="distributionform.distributionData.gpu">
                    <img src="./../../../assets/images/gpu_icon.png" />
                </div>
                <div class="jx-course-icon" v-if="distributionform.distributionData.notebook">
                    <img src="./../../../assets/images/notebook_icon.png" />
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button class="button-style" @click="DistributionFormSave('distributionform', 1)">保 存</el-button>
                <el-button class="button-style" @click="DistributionFormSave('distributionform', 2)">保存并进入环境</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    import videojs from 'video.js'   //视频
    import mavonEditor from "../../../components/mavonEditor";
    export default {
        components: {
            mavonEditor
        },
        data () {
            return {
//王天宇 多步骤 data
                //幻灯片页数
                carouselIndex:0,
//王天宇 多步骤 data end
// 王天宇 星级评分 data
                starValue:0,
// 王天宇 星级评分 data end
                //索引
                tabActive:0,
                activeIndex: '',
                 //角色
                roleId:'',
                 //视频
                versionVideo:'',

                 //下载文件
                downVodeo:'',
                 //后台下载标识
                remarkVideo:'',
                //存储tokenVideo值视频两次下载
                 tokenVideo:'',
                 //视频Url
                 videoUrl:'',
                 //视频展示
                 dialogPreviews:false,



                 //步骤弹窗
                 dialogHistorySteep:false,
                 //步骤名称
                 Steepname:'',
                 title:'',
                 //判断是 编辑 还是 修改
                 Isflag:'',



                //分配镜像弹窗
                dialogDistributionFormVisible: false,
                distributionform: {
                    // 类型
                    resource: 1,
                    // 实验类型 1 可视化实验 2 notebook实验
                    experimentType:1,
                    // 伪分布数组
                    distributedData: {
                        // cpu配置
                        cpuOptions: [
                            {
                                value: '1',
                                label: '1核'
                            },
                            {
                                value: '2',
                                label: '2核'
                            },
                            {
                                value: '4',
                                label: '4核'
                            },
                            {
                                value: '6',
                                label: '6核'
                            },
                            {
                                value: '8',
                                label: '8核'
                            },
                            {
                                value: '10',
                                label: '10核'
                            }
                        ],
                        cpuValue: '',
                        ramOptions: [
                            {
                                value: '1',
                                label: '1G'
                            },
                            {
                                value: '2',
                                label: '2G'
                            },
                            {
                                value: '4',
                                label: '4G'
                            },
                            {
                                value: '6',
                                label: '6G'
                            },
                            {
                                value: '8',
                                label: '8G'
                            },
                            {
                                value: '10',
                                label: '10G'
                            },
                            {
                                value: '12',
                                label: '12G'
                            },
                            {
                                value: '14',
                                label: '14G'
                            },
                            {
                                value: '16',
                                label: '16G'
                            },
                            {
                                value: '32',
                                label: '32G'
                            },
                            {
                                value: '48',
                                label: '48G'
                            },
                            {
                                value: '64',
                                label: '64G'
                            }
                        ],
                        ramValue: '',
                        // GPU
                        // switchValue: false
                    },
                    // 镜像配置
                    mirrorConfigData: {
                        // cpu配置
                        cpuOptions: [
                            {
                                value: '1',
                                label: '1核'
                            },
                            {
                                value: '2',
                                label: '2核'
                            },
                            {
                                value: '4',
                                label: '4核'
                            },
                            {
                                value: '6',
                                label: '6核'
                            },
                            {
                                value: '8',
                                label: '8核'
                            },
                            {
                                value: '10',
                                label: '10核'
                            }
                        ],
                        cpuValue: '',
                        ramOptions: [
                            {
                                value: '1',
                                label: '1G'
                            },
                            {
                                value: '2',
                                label: '2G'
                            },
                            {
                                value: '4',
                                label: '4G'
                            },
                            {
                                value: '6',
                                label: '6G'
                            },
                            {
                                value: '8',
                                label: '8G'
                            },
                            {
                                value: '10',
                                label: '10G'
                            },
                            {
                                value: '12',
                                label: '12G'
                            },
                            {
                                value: '14',
                                label: '14G'
                            },
                            {
                                value: '16',
                                label: '16G'
                            },
                            {
                                value: '32',
                                label: '32G'
                            },
                            {
                                value: '48',
                                label: '48G'
                            },
                            {
                                value: '64',
                                label: '64G'
                            }
                        ],
                        ramValue: '',
                        // GPU
                        switchValue: false
                    },
                    // 主节点
                    nodeMianData: {
                        // cpu配置
                        cpuOptions: [
                            {
                                value: '1',
                                label: '1核'
                            },
                            {
                                value: '2',
                                label: '2核'
                            },
                            {
                                value: '4',
                                label: '4核'
                            },
                            {
                                value: '6',
                                label: '6核'
                            },
                            {
                                value: '8',
                                label: '8核'
                            },
                            {
                                value: '10',
                                label: '10核'
                            }
                        ],
                        cpuValue: '',
                        ramOptions: [
                            {
                                value: '1',
                                label: '1G'
                            },
                            {
                                value: '2',
                                label: '2G'
                            },
                            {
                                value: '4',
                                label: '4G'
                            },
                            {
                                value: '6',
                                label: '6G'
                            },
                            {
                                value: '8',
                                label: '8G'
                            },
                            {
                                value: '10',
                                label: '10G'
                            },
                            {
                                value: '12',
                                label: '12G'
                            },
                            {
                                value: '14',
                                label: '14G'
                            },
                            {
                                value: '16',
                                label: '16G'
                            },
                            {
                                value: '32',
                                label: '32G'
                            },
                            {
                                value: '48',
                                label: '48G'
                            },
                            {
                                value: '64',
                                label: '64G'
                            }
                        ],
                        ramValue: '',
                        // GPU
                        switchValue: false
                    },
                    options0: [
                    ],
                    optionsValue0: [],
                    options1: [],
                    optionsValue1: [],
                    options2: [],
                    optionsValue2: [],
                    options3: [],
                    optionsValue3: [],
                    options4: [],
                    optionsValue4: [],
                    options5: [],
                    optionsValue5: [],
                    options6: [],
                    optionsValue6: [],
                    options7: [],
                    optionsValue7: [],
                    virtualStepList: [
                        { value: 1 },
                        { value: 2 }
                    ],
                    virtualStepCurrent: 1,
                    // 镜像列表数据
                    distributionData: ''
                },
                //单任务id
                singleTaskId:'',

                //实验目标
                TargetMarkHtml:'',
                Content:[

                ],
                //步骤列表
                steepList:[],
                //修改名字和id
                name:'',
                id:'',
                //视频Url
                 videoUrl:'',
                 stepChapterId:'',
                 //视频后台要的
                 fileName:'',
                 remark:'',
                 //是否允许下载
                 flagDown:'',
                 //实验判定
                 tabIndex:0,
                 //判定
                 judge:'',
                 judgerever:'',
                 isshowsuccess:'',
                 myVideo:'',

                //是否允许跳过
                exradio:'',







            }
        },
        computed:{
            carouselLength:function(){
                let self = this;
                let n = 0;
                let s = self.steepList.length%10 > 0 ? n=1 : n=0;
                return parseInt(self.steepList.length/10) + s
            },
            carouselSteepList:function(){
                let self = this;
                //当前页
                let ci = self.carouselIndex
                //共多少页
                let cl = self.carouselLength
                //整体数组
                let s = self.steepList

                return s.filter((item,index) => index >= ci*10 && index < ci*10+10);
            },
        },
        created(){

            this.roles = this.$store.state.user.roles[0];
            this.chapterId = this.$localstorage.getLocalStorage('chapterInfoData').chapterId
            this.courseId = this.$localstorage.getLocalStorage('setCourseId')
             //单任务id
            this.singleTaskId = this.$localstorage.getLocalStorage('chapterInfoData').singleTaskId
            //目标
            this.initTarget()
            //步骤
            this.initSteep()
// 王天宇 星级评分 created
            //获取评分
            this.getStar();
// 王天宇 星级评分 created end

        },

        mounted(){


        },
        destroyed(){
            if(this.myVideo){
                this.myVideo.dispose()
            }

        },
        methods:{
//
            //幻灯片改变
            carouselChange(index){
                this.carouselIndex = index;
                console.log(index,1);
            },
//
// 王天宇 星级评分 methods
            //评分获取
            getStar(){
                let self = this;
                //url = '/tes/course/'+self.courseId+'/chapter/'+self.singleTaskId+'/resource-online?resourceType=14'
                ///tes/course/课程id/chapter/任务id/info
                self.$http.get('/tes/course/'+ self.courseId + '/chapter/' + self.singleTaskId + '/info').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        console.log(res,123456);
                        self.starValue = res.data.difficultyScore-0;
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //评分设置
            reqStar(value){
                let self = this;
                console.log(value);
                const loading = this.$loading({
                    lock: true,
                    text: '保存中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
                //url = '/tes/course/'+self.courseId+'/chapter/'+self.singleTaskId+'/resource-online?resourceType=14'
                ///tes/course/课程id/chapter/任务id
                self.$http.post('/tes/course/'+ self.courseId + '/chapter/' + self.singleTaskId,{
                    "score":self.starValue
                }).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$message({
                            message: '设置成功',
                            type: 'success'
                        })
                        loading.close()
                    }else{
                        self.$message.error(res.message)
                        loading.close()
                    }
                })
            },
// 王天宇 星级评分 methods end
            //判定保存
            judgeSave(stepChapterId){
                let self = this
                if(self.judgerever && !self.judge ){
                    this.$message.warning('请添加判定脚本')
                    return
                }
                self.$http.post('/tes/experiment/judge/save',{
                    contextId: stepChapterId,
                    type:2,
                    script: self.judge? self.judge : '',
                    answer :self.judgerever? self.judgerever : '',
                    skipped:self.exradio == 1 ? true :  false
                }).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if(!self.isshowsuccess){
                            self.$message({
                                message: '保存成功',
                                type: 'success'
                            })
                        }
                        self.isshowsuccess = false
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //获取实验判定
            judgeGet(stepChapterId){
                let self = this
                //type 多步骤2  单 1
                self.$http.get('/tes/experiment/judge/info?contextId='+stepChapterId +'&type='+2).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.judge = res.data.script
                        self.judgerever = res.data.answer
                        self.exradio = res.data.skipped == true ? '1' : '2'

                        console.log(  self.exradio,696566)
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //添加步骤
            AddSerp(){
                this.dialogHistorySteep = true
                this.title =  '添加步骤'
                this.Isflag = 1
                this.Steepname = ''

            },
            //初始化实验目标
            initTarget(){
                let self = this
                self.$http.get('/tes/course/'+ self.courseId+'/chapter/'+self.singleTaskId+'/make/resource?types=14').then(response => {
                    let res = response.data
                    if(res.code == '200'){

                        if(res.data.laboratoryTarget.displayVersion[0]){
                            // 实验目标
                           self.$refs.Content.value = res.data.laboratoryTarget.creativeVersion[0].content
                        }
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //实验目标保存
            submitTarget(){
                 let self = this
                //实验目标
                let editorContent = this.$refs.Content.value;
                 const loading = this.$loading({
                    lock: true,
                    text: '文件保存中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
               let data = {
                    name:'实验目标',
                    content: editorContent,
                    htmlContent: self.$refs.Content.getRender()
                }
                self.$http.post('/tes/course/'+self.courseId+'/chapter/'+self.singleTaskId+'/resource-online?resourceType=14',data).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$message({
                            message: '保存成功',
                            type: 'success'
                        })
                        loading.close()
                        self.initTarget()


                    }else{
                        self.$message.error(res.message)
                        loading.close()
                    }
                })


            },
            //添加实验步骤
            //视频的初始化
            videoInit(stepChapterId){
                let self = this
                self.$http.get('/tes/course/'+ self.courseId+'/chapter/'+self.singleTaskId+'/make/resource?types=9&stepChapterId='+stepChapterId).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                         if(res.data.experimentVideo.creativeVersion.length>0){
                            self.versionVideo = res.data.experimentVideo.creativeVersion[0].filePath
                            self.fileName = res.data.experimentVideo.creativeVersion[0].fileName
                            self.remark = res.data.experimentVideo.creativeVersion[0].remark
                            self.flagDown= res.data.experimentVideo.creativeVersion[0].download
                            self.videoUrl =  res.data.experimentVideo.creativeVersion[0].filePath
                            // self.videoUrl = 'https://www.runoob.com/try/demo_source/movie.mp4'

                         }else{
                              self.versionVideo = ''

                         }
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //手册初始化
            ExpeimentInit(stepChapterId){
                let self = this
                let gv='item'+stepChapterId;
                // console.log(gv,777)
                self.$http.get('/tes/course/'+ self.courseId+'/chapter/'+self.singleTaskId+'/make/resource?types=8&stepChapterId='+stepChapterId).then(response => {
                    let res = response.data
                    if(res.code == '200'){

                        if(res.data.laboratoryManual != undefined && res.data.laboratoryManual.creativeVersion != undefined &&  res.data.laboratoryManual.creativeVersion[0] ){

                          self.$refs[gv][0].value = res.data.laboratoryManual.creativeVersion[0].content
                        //   console.log( this.$refs[gv][0].value,47)
                        }
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
             //关闭视频
            closeVideoDialog(){

                this.$nextTick(()=>{
                     this.myVideo.pause()
                 })
                // this.$nextTick(()=>{
                //     var videoPlayer = $("#video");
                //     if (typeof (videoPlayer) != "undefined") {
                //         console.log(11222222)
                //         var myPlayer = videojs('video');
                //         myPlayer.dispose();

                //     }
                // })



            },
            //视频上传
            putFile($event,stepChapterId){
                console.log(stepChapterId,111)
               let self = this;

                let fileType = $event.target.files[0].name
                fileType = fileType.substring((fileType.lastIndexOf('.') + 1), fileType.length) //取得后缀名
                if(fileType.toLowerCase() != 'mp4'){
                    self.$message.error('请上传mp4文件')
                    return
                }
                $('.video-img-load').show()
                $('.video-empty ').hide()
                $('.video-img').hide()

                 let formData = new FormData();
                 formData.append('files', $event.target.files[0]);
                 self.$http.post('/tes/course/'+self.courseId+'/chapter/'+self.singleTaskId+'/resource-file?stepChapterId='+stepChapterId+'&name=实验课学习视频&resourceType=9', formData, {headers: {'Content-Type': 'multipart/form-data'}}).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.$message({
                            message: '上传成功',
                            type: 'success'
                        })
                        self.videoInit(stepChapterId)
                       // loading.close()
                        //self.versionVideo = $event.target.files[0].name
                        $event.target.value=''
                        //self.show = false
                        $('.video-img-load').hide()
                        $('.video-empty ').show()
                        $('.video-img').show()
                    }else{
                        //loading.close()
                        $event.target.value=''
                        self.$message.error(res.message)

                    }
                 })
            },
            //下载视频
            downFiles(stepChapterId){
                let self = this
                if(self.versionVideo!='' && self.flagDown){
                    self.$http.post('/tes/course/'+self.courseId+'/chapter/'+self.singleTaskId+'/resource/file-download/permission?stepChapterId='+stepChapterId,{
                        remark :self.remark,
                        fileName : self.fileName
                     }) .then((response) => {
                     let res = response.data
                    if(res.code == '200'){
                        self.tokenVideo = res.data
                        let downloadElement = document.createElement('a');
                        downloadElement.style.display = 'none';
                        downloadElement.href = '/tes/course/'+self.courseId+'/chapter/'+self.singleTaskId+'/resource/file-download?token='+ self.tokenVideo
                        downloadElement.download = self.versionVideo; //下载后文件名
                        downloadElement.click(); //点击下载
                        //document.body.removeChild(downloadElement); //下载完成移除元素
                    }else{
                        self.$message.error(res.message)
                    }
                   })
                }
            },
            //实验判定
            tabFunction(n,item){
                this.tabIndex = n
                this.isshowsuccess = true
                //调取数据
                if(n == 0){
                    this.judgeSave(item.stepChapterId)
                    this.ExpeimentInit(item.stepChapterId)
                }else if(n == 1){
                    this.submitFn(item.stepChapterId)
                    this.judgeGet(item.stepChapterId)
                }

                //this.videoInit(item.stepChapterId)
                // this.videoInit(item.stepChapterId)
                // this.ExpeimentInit(item.stepChapterId)
                //this.judgeGet(item.stepChapterId)
            },
            //视频播放
            playvideo(stepChapterId,index){
                this.videoInit(stepChapterId)
                let self= this
                this.dialogPreviews = true
                 this.$nextTick(()=>{
                      self.myVideo = videojs('video', {
                        bigPlayButton: true,
                        textTrackDisplay: false,
                        posterImage: false,
                        errorDisplay: false,
                        controls :true,
                        height: 400,
                        width: 400,

                        playbackRates: [0.5,1,1.5,2,3], // 倍速播放配置
                    })
                     self.myVideo.play()
                     self.myVideo.src(self.videoUrl)
                     self.myVideo.load(self.videoUrl)
                 })


            },
            //删除视频
            deleteVideo(stepChapterId){
                console.log(stepChapterId,123)
                let self = this;
                self.$confirm('是否确定删除?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    self.$http.post('/tes/course/'+self.courseId+'/chapter/'+self.singleTaskId+'/resource?resourceType=9&stepChapterId='+stepChapterId,{
                        name:'实验课学习视频'
                    }).then((response) => {
                        let res = response.data
                        if(res.code == '200') {
                            self.$message({
                                message: '删除成功',
                                type: 'success'
                            })

                            self.versionVideo =''
                            self.videoUrl = ''
                        // window.location.reload(); 刷新好使
                        }else{
                            self.$message.error(res.message)
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                })
            },
            // word上传
            getFile($event,index,stepChapterId) {

                let self = this
                let gv='item'+stepChapterId;

                let fileType = $event.target.files[0].name

                fileType = fileType.substring((fileType.lastIndexOf('.') + 1), fileType.length) //取得后缀名
                if( fileType.toLowerCase() != "docx" && fileType.toLowerCase() != "doc"){
                    self.$message.error('请上传docx文件')
                    return
                }
                const loading = self.$loading({
                    lock: true,
                    text: '文件上传中...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
                let arr = [];
                let formData = new FormData();

                formData.append('file', $event.target.files[0]);

                self.$http.post('/tes/file/word2markdown', formData, {headers: {'Content-Type': 'multipart/form-data'}}).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.$message({
                            message: '上传成功',
                            type: 'success'
                        })
                        loading.close()
                        self.$nextTick(()=>{
                            self.$refs[gv][0].value = res.data
                        })

                        $event.target.value = ''
                    }else{
                        loading.close()
                        $event.target.value = ''
                        self.$message.error(res.message)
                    }
                })
            },
            //实验手册保存
            submitFn(stepChapterId){
                 let self = this
                 //console.log(index,2)
                //实验目标

                let gv='item'+stepChapterId;
                if(this.$refs[gv][0]){
                    let editorContent = this.$refs[gv][0].value
                    const loading = this.$loading({
                        lock: true,
                        text: '文件保存中...',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    })
                     let data = {
                        name:'实验手册',
                        content: editorContent,
                        htmlContent: self.$refs[gv][0].getRender()
                    }

                    self.$http.post('/tes/course/'+self.courseId+'/chapter/'+self.singleTaskId+'/resource-online?resourceType=8&stepChapterId='+stepChapterId,data).then(response => {
                        let res = response.data
                        if(res.code == '200'){
                            if(!self.isshowsuccess){
                                self.$message({
                                    message: '保存成功',
                                    type: 'success'
                                })
                            }
                            loading.close()
                            self.isshowsuccess = false
                            //self.ExpeimentInit(stepChapterId)

                        }else{
                            self.$message.error(res.message)
                            loading.close()
                        }
                    })

                }

            },
            //点击步骤
            steep(n,stepChapterId){
                $('.video-img-load').hide()
                this.tabActive = n
                this.stepChapterId = stepChapterId

                this.videoInit(stepChapterId)
                this.ExpeimentInit(stepChapterId)
                this.judgeGet(stepChapterId)


            },
            //添加步骤
            Add(){
                if(this.steepList.length>99){
                    this.$message.warning('最多添加99步')
                    return
                }
                console.log(this.steepList.length-1,33333);
                //Isflag :1
                this.title = '添加实验步骤'
                this.dialogHistorySteep = true
                this.Isflag = 1;
                this.Steepname  = ''
                this.id = ''
            },
            //删除步骤
            DeleteSteep(id){
                let self = this
                console.log(id,121)
                self.$confirm('确定删除么?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                    self.$http.delete('/tes/course/chapter/'+self.singleTaskId+'/step/'+id).then((response) => {
                        let res = response.data
                        if(res.code == '200') {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            })

                            this.tabActive = 0
                            self.initSteep()
                        }else{
                            self.$message.error(res.message)
                        }
                    })
                })
            },
            //步骤列表展示
            initSteep(){
                let self = this
                self.$http.get('/tes/course/chapter/'+self.singleTaskId+'/step/list').then(response => {
                    let res = response.data
                    if(res.code == '200'){

                        self.steepList = res.data
                        if( this.tabActive == 0 ){
                              self.stepChapterId = res.data[0].stepChapterId
                                //手册
                                self.ExpeimentInit(self.stepChapterId)

                                //视频
                                self.videoInit(self.stepChapterId)

                                //判定
                                self.judgeGet(self.stepChapterId)

                        }

                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //步骤弹窗保存
            saveList(){
                //编辑2 和  添加1
                let self = this

                if(self.Steepname == ''){
                    self.$message.warning('请输入步骤名称')
                    return
                }
                if(this.Isflag == 1){

                    self.$http.post('/tes/course/chapter/'+self.singleTaskId+'/step',{
                        name: self.Steepname
                    }).then(response => {
                        let res = response.data
                        if(res.code == '200'){
                            self.initSteep()
                            this.tabActive = 0
                            this.dialogHistorySteep = false
                        }else{
                            self.$message.error(res.message)
                        }
                    })
                }else if(this.Isflag == 2 ){
                   // console.log(this.tabActive,456)
                    self.$http.put('/tes/course/chapter/'+self.singleTaskId+'/step/'+this.id,{
                        name: self.Steepname
                    }).then(response => {
                        let res = response.data
                        if(res.code == '200'){
                            self.initSteep()
                           // this.tabActive = 0

                            // self.initSteep2()
                              this.tabActive = this.tabActive
                              this.dialogHistorySteep = false

                        }else{
                            self.$message.error(res.message)
                        }
                    })
                }
            },
            //修改
            editSteep(name,id){
                //Isflag :2
                 this.dialogHistorySteep = true
                 this.title = '修改实验步骤'
                 this.Isflag = 2
                 this.Steepname  = name
                 this.id = id

            },

            //虚机
            // 选择实验类型
            experimentTypeChange(e) {
                this.distributionform.resource = 1
                this.distributionform.distributedData.cpuValue = ''
                this.distributionform.distributedData.ramValue = ''
                // this.distributionform.distributedData.switchValue = false
                this.distributionform.mirrorConfigData.cpuValue = ''
                this.distributionform.mirrorConfigData.ramValue = ''
                this.distributionform.mirrorConfigData.switchValue = false
                this.distributionform.nodeMianData.cpuValue = ''
                this.distributionform.nodeMianData.ramValue = ''
                this.distributionform.optionsValue0 = [];
                this.distributionform.optionsValue1 = [];
                this.distributionform.optionsValue2 = [];
                this.distributionform.optionsValue3 = [];
                this.distributionform.optionsValue4 = [];
                this.distributionform.optionsValue5 = [];
                this.distributionform.optionsValue6 = [];
                this.distributionform.optionsValue7 = [];
                this.distributionform.virtualStepCurrent = 1;
                this.distributionform.distributionData = '';
                let type = e==1 ? false : true;
                this.getImageList(type);
            },
            // 查询NoteBook镜像列表
            getImageList(isNotebook) {
                 this.$http.get('/tes/image-allocation/image?cluster=false&notebook='+isNotebook ).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        this.distributionform.options0 = res.data
                    }else{
                        this.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 跳转到编辑实验镜像页
            VirtualLink() {
                let self = this
                // self.distributionform.resource = 1
                // let cluster = self.distributionform.resource == 1 ? false : true
                self.getImageList(false);
                self.$http.get('/tes/image-allocation/image?cluster=true&notebook=false' ).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.distributionform.options1 = res.data
                        self.distributionform.options2 = res.data
                        self.distributionform.options3 = res.data
                        self.distributionform.options4 = res.data
                        self.distributionform.options5 = res.data
                        self.distributionform.options6 = res.data
                        self.distributionform.options7 = res.data
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })


                // 显示分配镜像弹窗
                self.dialogDistributionFormVisible = true

                self.$http.get('/tes/image-allocation/course/'+self.courseId+'/'+self.singleTaskId).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if(res.data.allocated){
                            self.distributionform.experimentType = res.data.type;
                            //获取可视化实验单节点/notebook实验镜像列表
                            if (res.data.type == 2) {
                                self.getImageList(true);
                            }
                            if(res.data.mode == 1){
                                self.distributionform.resource = res.data.mode
                                // 伪分布取值
                                self.distributionform.distributedData.cpuValue = ""+res.data.cpu+""
                                self.distributionform.distributedData.ramValue = ""+res.data.ram+""
                                // self.distributionform.distributedData.switchValue = res.data.gpu

                                self.distributionform.optionsValue0 = [res.data.image.imageSource,res.data.image.imageId]
                                self.handleItemChange(self.distributionform.optionsValue0)
                            }else if(res.data.mode == 2){
                                self.distributionform.resource = res.data.mode
                                // 主节点取值
                                self.distributionform.nodeMianData.cpuValue = ""+res.data.cpu+""
                                self.distributionform.nodeMianData.ramValue = ""+res.data.ram+""
                                self.distributionform.nodeMianData.switchValue = res.data.gpu

                                self.distributionform.optionsValue7 = [res.data.image.imageSource,res.data.image.imageId]
                                // 从节点镜像配置
                                self.distributionform.mirrorConfigData.cpuValue = ""+res.data.slaveCpu+""
                                self.distributionform.mirrorConfigData.ramValue = ""+res.data.slaveRam+""
                                self.distributionform.mirrorConfigData.switchValue = res.data.slaveGpu
                                self.distributionform.virtualStepCurrent = res.data.slaveSize
                                self.$nextTick(() => {
                                    if(res.data.slaveSize == 1){
                                        self.distributionform.optionsValue1 = [res.data.slaveImages[0].imageSource, res.data.slaveImages[0].imageId]
                                    }else if(res.data.slaveSize == 2){
                                        self.distributionform.optionsValue1 = [res.data.slaveImages[0].imageSource, res.data.slaveImages[0].imageId]
                                        self.distributionform.optionsValue2 = [res.data.slaveImages[1].imageSource, res.data.slaveImages[1].imageId]
                                    }else if(res.data.slaveSize == 4){
                                        self.distributionform.optionsValue1 = [res.data.slaveImages[0].imageSource, res.data.slaveImages[0].imageId]
                                        self.distributionform.optionsValue2 = [res.data.slaveImages[1].imageSource, res.data.slaveImages[1].imageId]
                                        self.distributionform.optionsValue3 = [res.data.slaveImages[2].imageSource, res.data.slaveImages[2].imageId]
                                        self.distributionform.optionsValue4 = [res.data.slaveImages[3].imageSource, res.data.slaveImages[3].imageId]
                                    }else if(res.data.slaveSize == 6){
                                        self.distributionform.optionsValue1 = [res.data.slaveImages[0].imageSource, res.data.slaveImages[0].imageId]
                                        self.distributionform.optionsValue2 = [res.data.slaveImages[1].imageSource, res.data.slaveImages[1].imageId]
                                        self.distributionform.optionsValue3 = [res.data.slaveImages[2].imageSource, res.data.slaveImages[2].imageId]
                                        self.distributionform.optionsValue4 = [res.data.slaveImages[3].imageSource, res.data.slaveImages[3].imageId]
                                        self.distributionform.optionsValue5 = [res.data.slaveImages[4].imageSource, res.data.slaveImages[4].imageId]
                                        self.distributionform.optionsValue6 = [res.data.slaveImages[5].imageSource, res.data.slaveImages[5].imageId]
                                    }
                                })
                                self.handleItemChange(self.distributionform.optionsValue7)
                            }
                        }
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            //弹窗step切换
            AddClass(index){
                let self = this
                // if(index != 2){
                //     return
                // }
                self.distributionform.virtualStepCurrent = index
            },
            // 分配镜像
            // 表单提交
            DistributionFormSave(formName, tag){
                // tag标记1.保存 2.保存并跳转实验镜像
                let self = this
                self.$refs[formName].validate((valid) => {
                    if (valid) {
                        let data = {}, slaveImageIdsArr = []
                        // data.chapterIds = self.chapterId
                        data.mode = self.distributionform.resource
                        data.experimentType = self.distributionform.experimentType
                        if(self.distributionform.resource == 1){
                            data.imageId = self.distributionform.optionsValue0[1] ? self.distributionform.optionsValue0[1] : ''
                            data.cpu = self.distributionform.distributedData.cpuValue
                            data.ram = self.distributionform.distributedData.ramValue
                            // data.gpu = self.distributionform.distributedData.switchValue

                            if (data.imageId == '') {
                                self.$message.error('请选择镜像')
                                return
                            }
                        }else if(self.distributionform.resource == 2){
                            data.imageId = self.distributionform.optionsValue7[1] ? self.distributionform.optionsValue7[1] : ''
                            data.cpu = self.distributionform.nodeMianData.cpuValue
                            data.ram = self.distributionform.nodeMianData.ramValue
                            data.gpu = self.distributionform.nodeMianData.switchValue
                            data.slaveCpu = self.distributionform.mirrorConfigData.cpuValue
                            data.slaveRam = self.distributionform.mirrorConfigData.ramValue
                            data.slaveGpu = self.distributionform.mirrorConfigData.switchValue

                            if (data.imageId == '') {
                                self.$message.error('请选择主节点镜像')
                                return
                            }

                            if (self.distributionform.virtualStepCurrent == 1) {
                                slaveImageIdsArr.push(self.distributionform.optionsValue1[1])
                                if (self.distributionform.optionsValue1[1] == undefined) {
                                    self.$message.error('请选择从节点1镜像')
                                    return
                                }
                            }else if (self.distributionform.virtualStepCurrent == 2) {
                                slaveImageIdsArr.push(self.distributionform.optionsValue1[1])
                                if (self.distributionform.optionsValue1[1] == undefined) {
                                    self.$message.error('请选择从节点1镜像')
                                    return
                                }
                                slaveImageIdsArr.push(self.distributionform.optionsValue2[1])
                                if (self.distributionform.optionsValue2[1] == undefined) {
                                    self.$message.error('请选择从节点2镜像')
                                    return
                                }
                            }else if (self.distributionform.virtualStepCurrent == 4) {
                                slaveImageIdsArr.push(self.distributionform.optionsValue1[1])
                                if (self.distributionform.optionsValue1[1] == undefined) {
                                    self.$message.error('请选择从节点1镜像')
                                    return
                                }
                                slaveImageIdsArr.push(self.distributionform.optionsValue2[1])
                                if (self.distributionform.optionsValue2[1] == undefined) {
                                    self.$message.error('请选择从节点2镜像')
                                    return
                                }
                                slaveImageIdsArr.push(self.distributionform.optionsValue3[1])
                                if (self.distributionform.optionsValue3[1] == undefined) {
                                    self.$message.error('请选择从节点3镜像')
                                    return
                                }
                                slaveImageIdsArr.push(self.distributionform.optionsValue4[1])
                                if (self.distributionform.optionsValue4[1] == undefined) {
                                    self.$message.error('请选择从节点4镜像')
                                    return
                                }
                            }else if (self.distributionform.virtualStepCurrent == 6) {
                                slaveImageIdsArr.push(self.distributionform.optionsValue1[1])
                                if (self.distributionform.optionsValue1[1] == undefined) {
                                    self.$message.error('请选择从节点1镜像')
                                    return
                                }
                                slaveImageIdsArr.push(self.distributionform.optionsValue2[1])
                                if (self.distributionform.optionsValue2[1] == undefined) {
                                    self.$message.error('请选择从节点2镜像')
                                    return
                                }
                                slaveImageIdsArr.push(self.distributionform.optionsValue3[1])
                                if (self.distributionform.optionsValue3[1] == undefined) {
                                    self.$message.error('请选择从节点3镜像')
                                    return
                                }
                                slaveImageIdsArr.push(self.distributionform.optionsValue4[1])
                                if (self.distributionform.optionsValue4[1] == undefined) {
                                    self.$message.error('请选择从节点4镜像')
                                    return
                                }
                                slaveImageIdsArr.push(self.distributionform.optionsValue5[1])
                                if (self.distributionform.optionsValue5[1] == undefined) {
                                    self.$message.error('请选择从节点5镜像')
                                    return
                                }
                                slaveImageIdsArr.push(self.distributionform.optionsValue6[1])
                                if (self.distributionform.optionsValue6[1] == undefined) {
                                    self.$message.error('请选择从节点6镜像')
                                    return
                                }
                            }
                            data.slaveImageIds = slaveImageIdsArr
                        }
                        self.$http.post('/tes/image-allocation/course/'+self.singleTaskId, data).then(response => {
                            let res = response.data
                            if(res.code == '200'){
                                if(tag == 1){
                                    self.$message({
                                        message: '镜像分配成功',
                                        type: 'success'
                                    })
                                    // 镜像分配弹窗隐藏
                                    self.dialogDistributionFormVisible = false
                                }else{
                                    self.$router.push({
                                        path: '/Teaching/MyCourses/ModifyVirtualMachine'
                                    })
                                }
                            }else{
                                self.$message.error(res.message)
                            }
                        }).catch(err => {
                            console.log(err)
                        })
                    }
                })
            },
            handleItemChange(data) {
                let self = this
                if(data[1]){
                    self.$http.get('/tes/image-allocation/image/'+data[1]).then(response => {
                        let res = response.data
                        if(res.code == '200'){
                            self.distributionform.distributionData = res.data
                        }else{
                            self.$message.error(res.message)
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                }

            },
        }
    }
</script>
<style lang="scss">
    @import "./../../../styles/layout/color_variables";
    .expeiment-chaper{
        // 分配镜像弹窗样式
        .dialog-distribution{
            .el-dialog__body{
                min-height:350px;
            }
            .el-form{
                padding: 0 50px;
                .el-dialog__body{
                    position: relative;
                }
                .el-form-item__label{
                    width: 95px;
                }
                .el-select{
                    .el-input__inner{
                        width: 80px;
                    }
                }
                .el-input__icon{
                    line-height: 32px;
                }
                .miror-item{
                    .el-form-item{
                        width: 305px;
                        .el-select{
                            margin-right: 5px;
                            .el-input__inner{
                                width: 150px;
                            }
                        }
                    }
                }
                .config-item{
                    .item-config{
                        width: 340px;
                        .el-select{
                            .el-input__inner{
                                width: 110px;
                            }
                        }
                    }
                    .item-cpu{
                        .el-form-item__error{
                            left: 95px;
                        }
                    }
                    .el-form-item{
                        width: 305px;
                        .el-select{
                            margin-right: 5px;
                        }
                        &.item-distributed{
                            width: 270px;
                            .el-select{
                                .el-input__inner{
                                    width: 180px;
                                }
                            }
                            .el-form-item__error{
                                left: 85px;
                            }
                        }
                        &.item-Gpu{
                            width: 100px;
                            .el-form-item__label{
                                width: 55px;
                            }
                        }
                    }
                }
                .form-title{
                    font-size: 16px;
                    color: #385899;
                    width: 85px;
                    margin-bottom: 15px;
                    text-align: center;
                }
                .el-select{
                    .el-input__inner{
                        width: 180px;
                    }
                }
                .el-cascader{
                    line-height: 32px;
                }
                .item-node{
                    .el-form-item{
                        display: inline-block;
                        width: 330px;
                    }
                }
            }
            .el-dialog__footer{
                text-align: center;
            }
            .button-style{
                min-width: 90px;
            }
            .el-radio-group{
                .el-radio__inner{
                    border-color: #DCDFE6;
                }
                .el-radio{
                    width: 80px;
                }
            }
            .virtual-step{
                width: 188px;
                border-bottom: solid 3px #dfdfdf;
                margin-top: 15px;
                margin-left: 80px;
                ul{
                    li{
                        float: left;
                        width: 19px;
                        height: 19px;
                        line-height: 19px;
                        color: #fff;
                        font-size: 12px;
                        text-align: center;
                        border-radius: 10px;
                        margin: -9px 0 0 0;
                        background: #d9d9d9;
                        cursor: pointer;
                        &.active-disabled{
                            cursor:not-allowed;
                        }
                        &:first-child{
                            margin-left: 10%;
                        }
                        &:nth-child(2){
                            margin-left: 29%;
                        }
                        &:last-child{
                            margin-left: 31%;
                        }
                        &.active{
                            background: #1277eb;
                        }
                    }
                }
            }
            .distribution-item{
                width: 208px;
                height: 280px;
                border: solid 1px #e8e8e8;
                border-radius: 4px;
                position: absolute;
                right: 55px;
                top: 95px;
                .jx-course-box{
                    margin-top: 25px;
                    text-align: center;
                    img{
                        width: 155px;
                    }
                    span{
                        display: block;
                        font-size: 14px;
                        color: $title-gray;
                        margin-top: 10px;
                    }
                }
                .jx-course-icon{
                    position: absolute;
                    right: 18px;
                    top: -5px;
                }
                .jx-course-text{
                    margin-top: 10px;
                    margin: 10px 24px 0;
                    height: 145px;
                    overflow-y: scroll;
                    font-size: 12px;
                    line-height: 16px;
                    color: $table-gray;
                    word-wrap: break-word;
                    &::-webkit-scrollbar {
                        width: 2px;
                    }

                    &::-webkit-scrollbar-thumb {
                        background: #6c6c6c;
                    }
                }
            }
        }
        // .el-cascader-menu{
        //     height: auto;
        // }
    }
</style>
<style scoped>
    .iconBtn-class{
        margin-top: -8px;
    }
    .iconBtn>>>.el-radio-group{

        margin-right: 10px;
    }
    .Laboratory>>> .v-note-wrapper{
        /* z-index: 7; */
    }
    .el-dialog__wrapper{
        /* z-index: 9999 !important; */
    }
     .ediator-ev>>>.v-note-wrapper {
        height: 300px;
        z-index: 0;
    }
    .ediator-ev>>>.v-note-wrapper.fullscreen{
        height: auto!important;
    }
    .ediator-ev>>>.fullscreen{
       top: 60px;
       z-index:  9999999999!important;
    }
    .el-input>>>.el-input__inner{
        width: 260px;
    }
    .el-textarea>>>.el-textarea__inner{
        height:190px;
        background: #fafafa;
        padding: 5px 31px 5px 22px;
    }
    /*步骤*/
      .steps {
        position: relative;
        margin: 30px 0;
        overflow: hidden;
        z-index: 9;
        width: 1000px;
        margin: 38px auto 0;

    }
    /*步骤描述*/
    .steps li {
        list-style-type: none;
        font-size: 12px;
        text-align: center;
        width: 10%;
        position: relative;
        float: left;
        cursor: pointer;
    }

    /*步骤数字*/
    .steps li:before {
        display: block;
        content: ''; /*设定计数器内容*/
        width: 30px;
        height: 30px;
        background-color: #efeded;
        line-height: 32px;
        border-radius: 32px;
        font-size: 16px;
        color: #fff;
        text-align: center;
        font-weight: 700;
        margin: 0 auto 16px auto;
    }

    /*连接线*/
    .steps li ~ li:after {
        content: '';
        width: 100%;
        height: 2px;
        background-color: #e0dede;
        position: absolute;
        left: -50%;
        top: 15px;
        z-index: -1; /*放置在数字后面*/
    }

    /*将当前/完成步骤之前的数字及连接线变绿*/
    .steps li.active:before
    {
        background-color: #1277eb;
        /* content:'√'; */
        content:'';
        z-index: 999;
        background: url('../../../assets/images/rightr.png');
     }
    .steps .active{
        color: #1277eb;
    }
    .tabFunction{
        padding-top: 15px;
        height: 60px;

    }
    .tabFunction ul li{
        float: left;
        margin-right: 10px;
        font-size: 15px;
        padding: 14px;
        cursor: pointer;
    }
    .tabFunctionIndex{
        background-color:#dcebfc;
        color: #3a8eee;
        border-radius:5px
    }
    .spance{
        margin-top: 20px;
    }
     .iconBtn{
        display: flex;
        justify-content: flex-end;
    }
    .iconBtn .icon-baocun2{
        color: #4d73c0;
        font-size: 22px;
        vertical-align: text-top;
        margin-right: 25px;
        cursor: pointer;
    }

</style>
<style lang="scss" scoped>
.expeiment-chaper{
      margin-top: 0px;
    .title{
        font-size: 16px;
    }
    .ediator-title{
         overflow: hidden;
         padding-bottom:10px;
       .icon-baocun2{
            color: #4d73c0;
            font-size: 24px;
            vertical-align: text-top;
            margin-right: 24px;
            cursor: pointer;
            cursor: pointer;
            &:hover{
                color: #385899;
            }
        }
    }
    .ediator{
        padding-top: 30px;
    }
    .ediator-ev{
        clear: both;
    }
    .ediator-ev>>>.v-note-wrapper {
        height: 300px;
        z-index: 1;
    }
    .AddSerp{
        margin: 78px auto 20px;
        text-align: center;
        .btns{
           width: 220px;
            line-height: 43px;
            height: 43px;
            font-size: 16px;
            border-radius:40px;
            .icon-liebiao{
                font-size: 18px;
                margin-right: 5px;
                vertical-align: -1px;

            }
        }
    }
    .expeiment-steep{
        clear: both;
        margin:30px 0 5px;
        display: flex;
        justify-content: space-between;
        p{
            line-height: 30px;
             font-size: 16px;
        }
        .icon-bianji{
            margin-left: 5px;
            cursor: pointer;
        }
        .expeiment-steep-inroduce{
            font-weight: 900;
            max-width: 300px;
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            vertical-align: middle

        }

    }
    .uploadBtns{
        position: relative;
        margin-top: 35px;
        .uploadBtns-file{
            margin: 8px 0;
            color: #cacaca;
        }

    }
    #version-files{
        position: absolute;
        left: 0;
        opacity: 0;
        height: 130px;
        top: -35px;
        width: 220px;
        cursor: pointer;
    }
    .video{
        width: 1200px;
        margin: 10px auto;
    }
    .video-empty{
        border: 1px dashed #b0b0b0;
        width: 220px;
        height: 130px;
        line-height: 130px;
        text-align: center;
        cursor: pointer;
        position: relative;
        border-radius: 6px;
        margin-bottom: 20px;
        margin-top: 20px;
        &:hover{
             border: 1px dashed #868686;
        }
    }
    .video-img{
        cursor: pointer;
        position: relative;
        background: url('../../../assets/images/defalut.png') no-repeat;
        width: 220px;
        height: 130px;
        margin-bottom: 20px;
        margin-top: 20px;
    }
    .video-img-load{
        cursor: pointer;
        position: relative;
        background: url('../../../assets/images/defalut.png') no-repeat;
        width: 220px;
        height: 130px;
        line-height: 130px;
        color: #fff;
        text-align: center;
        margin-top: 20px;
        margin-bottom: 20px;
        display: none
    }
    .video-img>img{
        width: 200px;
        height: 100px;
        line-height: 100px;

    }
    .iconpost{
        padding: 45px 20px 10px 20px;
        color: #fff;
    }
    .iconpost .filename{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 180px;
        text-align: center
    }
    .icon-tubiaozhizuo-{
        color: #385899;
        font-size: 20px;
        vertical-align: bottom;
        cursor: pointer;
        &:hover{
            color: #4d73c0;
        }
    }
    .icon-shangchuan-{
        margin-right: 3px;
        font-size: 15px;
    }
    .el-icon-search{
        margin-right: 3px;
    }
    .icon-icon_edit{
        font-size: 14px;
        margin-right: 3px;
    }
    .iconfontlist{
        text-align: center;
        margin-top: 12px;
        i{
            background: #fff;
            opacity: 0.7;
            border-radius: 50%;
            width: 19px;
            height: 19px;
            display: inline-block;
            padding: 4px;
            text-align: center;
            color: #000;
            margin-right: 3px;
            &:hover{
                opacity: 1;
            }

        }
        #versionFile{
            position: absolute;
            left: 0px;
            top: 0px;
            width: 27px;
            height: 27px;
            opacity: 0;
        }
        .icon-shangchuan{
            position: relative;
        }
        .icon-Group-{
            font-weight: 600;
        }

    }
    #video{
        width: 100%;
        height: 400px;
    }
    .video{
        font-size: 16px;
    }
    .Laboratory{
        margin: 20px 0;
    }
    .upload-btn{
        display: flex;
        justify-content: flex-end;
        padding-bottom: 5px;
         .icon-baocun2{
            color: #4d73c0;
            font-size: 22px;
            vertical-align: text-top;
            margin-left: 5px;
            cursor: pointer;
            &:hover{
                color: #385899;
            }
        }
        span{
            &.word-upload{
                position: relative;
                float: left;
                width: 28px;
                height: 28px;
                overflow: hidden;
                margin-right: 10px;

            }
        }
        #upload-file-input{
            position: absolute;
            left: 5px;
            opacity: 0;
            height: 30px;
            top: 3px;
            width: 24px;
            cursor: pointer;
        }
        .icon-tubiaozhizuomoban2{
            font-size: 30px;
            color: #4d73c0;
            vertical-align:-6px;
            &:hover{
                color: #385899;
            }
        }
    }
    .virtual-position{
        position: fixed;
        right: 20px;
        bottom: 120px;
        cursor: pointer;
        z-index: 10;
        &:hover{
            transform: rotate(360deg);
            transition: .5s;
        }
    }

}
</style>
<style lang="scss">
    .s-star-box{
        display:flex;
        align-items: center;
        margin-bottom:10px;
    }
    #step-file{
        .el-carousel__indicators--outside{
            display:none;
        }
    }
</style>
<!-- 王天宇 星级评分 css end -->
